<template>
	<view class="header">
		<view class="status_bar" :style="{'height': tops+'px'}"></view>
		<view class="title">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				tops: 20,
				height: 40
			}
		},
		onLoad() {
		},
		mounted() {
			this.tops = uni.getStorageSync('barHeight') || 20
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					uni.setStorageSync('barHeight', this.tops)
					// let custom = uni.getMenuButtonBoundingClientRect();
					// this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
				}
			})
		},
		methods: {

		}
	}
</script>

<style scoped>
	.header {
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #fff;
	}

	.title {
		height: 40px;
		line-height: 40px;
		padding: 0px 15px;
		font-size: 16px;
		font-weight: bold;
	}
</style>